<template>
  <div id="app" class="clearfix">
    <div class="pageWrapper">
      <!--导航栏-->
      <div class="navbar_self">
        <span style="color:white;font-size:26px;margin:20px 40px">接口测试平台</span>
        <ul class="user">
          <router-link to="/admin/"><span style="color: white">{{username}}</span></router-link>
          <router-link to="/login/"><span style="color: white">退出</span></router-link>
        </ul>
      </div>
      <!--主体内容-->
      <div class="container_self">
        <!--左侧列表项-->
        <div class="aside">
          <el-menu style='margin-left: -20px' :default-openeds="openeds" default-active="1" class="el-menu-vertical-demo" background-color="#5b80b2" @open="handleOpen" @close="handleClose">
            <el-submenu index="1">
              <template slot="title">
                <i class="icon iconfont icon-chanpin" style="font-size: 18px">&nbsp;&nbsp;&nbsp;项目管理</i>
              </template>
              <el-menu-item index="1-1" style="margin-top: -60px">
                <router-link to="/base/projectList">
                  <i class="el-icon-suitcase" style="font-size: 12px;margin-left: -35px">&nbsp;&nbsp;&nbsp;项目列表</i>
                </router-link>
              </el-menu-item>
              <el-menu-item index="1-2">
                <router-link to="/base/projectAdd">
                  <i class="el-icon-suitcase" style="font-size: 12px;margin-left: -35px">&nbsp;&nbsp;&nbsp;新增项目</i>
                </router-link>
              </el-menu-item>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title">
                <i class="icon iconfont icon-chanpin" style="font-size: 18px">&nbsp;&nbsp;&nbsp;模块管理</i>
              </template>
              <el-menu-item index="2-1" style="margin-top: -60px">
                <!--由于router-link 与其他页路由面绑定了同一个组件，导致切换路由时页面不更新，此时通过调用routerReresh事件重新生成新<router-view>标签-->
                <router-link to="/base/moduleList" @click.native="routerRefresh()">
                  <i class="el-icon-menu" style="font-size: 12px;margin-left: -35px">&nbsp;&nbsp;&nbsp;模块列表</i>
                </router-link>
              </el-menu-item>
              <el-menu-item index="2-2">
                <router-link to="/base/moduleAdd">
                  <i class="el-icon-menu" style="font-size: 12px;margin-left: -35px">&nbsp;&nbsp;&nbsp;新增模块</i>
                </router-link>
              </el-menu-item>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title">
                <i class="icon iconfont icon-chanpin" style="font-size: 18px">&nbsp;&nbsp;&nbsp;用例管理</i>
              </template>
              <el-menu-item index="3-1" style="margin-top: -60px">
                <router-link to="/base/caseList" @click.native="routerRefresh()">
                  <i class="el-icon-postcard" style="font-size: 12px;margin-left: -35px">&nbsp;&nbsp;&nbsp;用例列表</i>
                </router-link>
              </el-menu-item>
              <el-menu-item index="3-2">
                <router-link to="/base/caseSingleAdd">
                  <i class="el-icon-postcard" style="font-size: 12px;margin-left: -35px">&nbsp;&nbsp;&nbsp;新增单一接口用例</i>
                </router-link>
              </el-menu-item>
              <el-menu-item index="3-3">
                <router-link to="/base/caseProcessAdd">
                  <i class="el-icon-postcard" style="font-size: 12px;margin-left: -35px">&nbsp;&nbsp;&nbsp;新增流程接口用例</i>
                </router-link>
              </el-menu-item>
            </el-submenu>
            <!--            <el-submenu index="5">-->
            <!--              <template slot="title">-->
            <!--                <i class="icon iconfont icon-tianchongxing-" style="font-size: 18px">&nbsp;&nbsp;&nbsp;测试计划</i>-->
            <!--              </template>-->
            <!--              <el-menu-item index="5-1" style="margin-top: -60px">-->
            <!--                <router-link to="/base/testSuite">-->
            <!--                  <i class="icon iconfont icon-tianchongxing-" style="font-size: 12px">&nbsp;&nbsp;&nbsp;测试套件</i>-->
            <!--                </router-link>-->
            <!--              </el-menu-item>-->
            <!--              <el-menu-item index="5-2">-->
            <!--                <router-link to="/base/periodicTask">-->
            <!--                  <i class="icon iconfont icon-tianchongxing-" style="font-size: 12px">&nbsp;&nbsp;&nbsp;定时任务</i>-->
            <!--                </router-link>-->
            <!--              </el-menu-item>-->
            <!--            </el-submenu>-->
            <!--            <el-submenu index="6">-->
            <!--              <template slot="title">-->
            <!--                <i class="icon iconfont icon-tianchongxing-" style="font-size: 18px">&nbsp;&nbsp;&nbsp;报告管理</i>-->
            <!--              </template>-->
            <!--              <el-menu-item index="6-1" style="margin-top: -60px">-->
            <!--                <router-link to="/base/reportList">-->
            <!--                  <i class="icon iconfont icon-tianchongxing-" style="font-size: 12px">&nbsp;&nbsp;&nbsp;查看报告</i>-->
            <!--                </router-link>-->
            <!--              </el-menu-item>-->
            <!--            </el-submenu>-->
            <!--            <el-submenu index="7">-->
            <!--              <template slot="title">-->
            <!--                <i class="icon iconfont icon-baogao1" style="font-size: 18px">&nbsp;&nbsp;&nbsp;系统设置</i>-->
            <!--              </template>-->
            <!--              <el-menu-item index="7-1" style="margin-top: -60px">-->
            <!--                <i class="icon iconfont icon-baogao1" style="font-size: 12px">&nbsp;&nbsp;&nbsp;任务监控</i>-->
            <!--              </el-menu-item>-->
            <!--            </el-submenu>-->
          </el-menu>
        </div>
        <!--右侧主体项-->
        <div class="main">
          <router-view v-if="routerAlive" @func="getMsgFromSon"></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
    name: 'App',
    data() {
        return {
            username: '',
            routerAlive: true,
            msgFromSon: "",
            openeds: ['1', '2', '3']
        }
    },
    methods: {
        getMsgFromSon(data) {
            this.msgFromSon = data;
            console.log('父属性');
            console.log(this.msgFromSon)
        },
        handleOpen(key, keyPath) {
            console.log(key, keyPath)
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath)
        },
        routerRefresh() {
            this.routerAlive = false;
            this.$nextTick(() => {
                this.routerAlive = true
            })
        },
    },
    created() {
        //获取用户名称
        this.username = sessionStorage.getItem('username');
        console.log(`获取用户username：${this.username}`);
    }
}
</script>

<style>
  /*@import "css/bootstrap.min.css";*/
  .clearfix:after {
    content: "";
    display: table;
    clear: both;
  }

  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    /*margin-top: 60px;*/
    height: 100vh;
  }

  /*.main {*/
  /*  float: left;*/
  /*  width: 95%;*/
  /*  background: #EFF2F7;*/
  /*  !*background: red;*!*/
  /*  height: 100vh;*/
  /*  !*overflow: hidden;*!*/
  /*}*/
  .navbar_self {
    height: 80px;
    background: #5b80b2;
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;

  }

  .navbar_self a {
    font-size: 18px;
    margin-left: 50px;
    color: white;
    text-decoration: none;

  }

  .user {
    position: absolute;
    right: 50px;
  }

  .user li {
    list-style: none;
    float: left;
  }

  .pageWrapper {
    background: aliceblue;
    height: 100vh;
    /*overflow: auto;*/
    /*display: flex;*/
    /*display: -webkit-flex;*/
    /*-webkit-flex-direction: column;*/
  }


  .container_self {
    display: flex;
    display: -webkit-flex;
    -webkit-flex-direction: row;
    height: 100vh;
  }

  .aside {
    width: 200px;
    /*height: 100vh;*/
    /*background: #999;*/
    background: #5b80b2;
  }

  .aside ul {
    width: 200px;
    margin-top: 50px;
  }


  .aside ul li a {
    text-decoration: none;
  }

  .aside ul li i {
    color: white;
  }

  .aside ul li a:hover {
    color: red;
  }

  .main {
    flex: 1;
    position: relative;
    background: aliceblue;
  }

  .main > .func {
    margin: 20px;
    border: 1px solid green;
  }

  .main > .context {
    border: 1px solid purple;
  }

  .pagination_self {
    display: block;
    margin: 50px auto 0 auto;
    /*border: 1px solid black;*/
    width: 60%;
    background: aliceblue;
  }

  .pagination_self .pagination_total li {
    display: inline-block;
    font-size: 16px;
    vertical-align: top;
  }

  .footer_self {
    border: 1px solid green;
    background: aliceblue;
    height: 50px;
    width: 100%;
    display: block;
  }
</style>
